<template>
  <div class="navmenu">
    <em-grid
      :border="false"
      square
      :column-num="columnSize"
    >
      <em-grid-item
        v-for="(menu,index) in menus"
        :key="index"
        :icon="menu.thumb || defaultImage"
        :text="menu.title || '文字'"
      />
    </em-grid>
  </div>
</template>

<script>
export default {
  name: 'Navbar',
  props: {
    value: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      defaultImage: require('@/assets/images/default/square.png')
    }
  },
  computed: {
    options() {
      return this.value
    },
    styles() {
      if (this.options && this.options.styles) {
        return this.options.styles
      }
      return null
    },
    headerOptions() {
      if (this.options && this.options.header) {
        return this.options.header
      }
      return this.header
    },
    setting() {
      if (this.options && this.options.setting) {
        return this.options.setting
      }
      return null
    },
    columnSize() {
      if (this.setting && this.setting.cols) {
        return this.setting.cols
      }
      return 5
    },
    maxCols() {
      if (this.setting && this.setting.maxCols) {
        return this.setting.maxCols
      }
      return 2
    },
    maxRows() {
      if (this.setting && this.setting.maxRows) {
        return this.setting.maxRows
      }
      return 1
    },
    mockSize() {
      if (this.setting && this.setting.mockItems) {
        return this.setting.mockItems
      }
      return 0
    },
    menus() {
      var items = []
      if (this.options && this.options.items) {
        items = this.options.items
      }
      var size = this.mockSize - items.length
      if (size > 0) {
        for (var i = 0; i < size; i++) {
          items.push({
            thumb: '',
            title: ''
          })
        }
      }
      return items
    }
  }
}
</script>

<style lang="scss">
.navmenu {
  .em-grid {
    padding: 15px 0 10px;
  }
  .em-grid-item {
    &__icon {
      .em-icon__image {
        width: 1.5em;
        height: 1.5em;
        border-radius: 5px;
      }
    }
  }
  .em-grid-item__icon + .em-grid-item__text {
    margin-top: 4px;
  }
}
</style>
